import React, { Component } from 'react';
import styles from '../index.less';
import { Table, Avatar } from 'antd';
import Modales from '../Modales/index';
import { router } from 'umi';
import { data } from './data.js';
import Axios from 'axios';
import { connect } from 'dva';
import { onTableDatas } from '@/utils/utils';
import { getShopId } from '@/utils/localStorage';
function keyValue(key) {
    if (key == 1) {
        return ''
    }
    else if (key == 2) {
        return 'WAIT_PAY'
    }
    else if (key == 3) {
        return 'FINISH'
    }
}
@connect(({ buyoutes, tableList }) => ({ buyoutes, tableList }))
export default class Tablecontent extends Component {
    state = {
        isVisible: false,
        isType: null,
        current: 1,
        idcard: null,
        facecard: null
    }
    onShowmodal = (type, orderId) => {
        if (type === 'view') {
            sessionStorage.setItem('uid', orderId)
            router.push(`/list/buyout/detail?id=${orderId}`);
        }
        else if (type === 'note') {
            sessionStorage.setItem('uid', orderId)
            this.setState({
                isVisible: true,
                isType: type,
            });
        }
        else {
            const { dispatch } = this.props;
            dispatch({
                type: 'order/getCardinformation',
                payload:{
                    orderId:orderId.orderId
                },
                callback: (res) => {
                    this.setState({
                        idcard: !!res.idCardBackUrl && !!res.idCardFrontUrl ? 1 : 0,
                        facecard: res.faceAuthStatus == '03' ? 1 : 0,
                        isVisible: true,
                        isType: type,
                    })
                }
            })
        }
    }
    onCancel = () => {
        this.setState({
            isVisible: false
        })
    }
    onPageChange = (pagination) => {
        this.setState({
            current: pagination.current
        }, () => {
            const { typeOrder, formData } = this.props;
            const { current } = this.state;
            if (!!formData) {
                this.inForinmation(formData, keyValue(typeOrder), current);
            }
            else {
                this.onRequest(keyValue(typeOrder), current);
            }
        })
    }
    onRequest = (status, current) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'buyoutes/getTableList',
            payload: {
                addressUserName: "",
                addressUserPhone: "",
                buyOutOrderId: "",
                createTimeEnd: "",
                createTimeStart: "",
                orderId: "",
                pageNumber: current,
                pageSize: 10,
                productId: "",
                productName: "",
                rentTimeEnd: "",
                rentTimeStart: "",
                status: status,
                telephone: "",
                userName: "",
                shopId: getShopId(),
            }
        })
    }
    inForinmation = (values, status, current) => {
        const {
            orderbianhao,//订单编号
            goodsName, //商品名称
            orderid,//商品ID
            orderstate, //订单状态
            olOrderid, //原订单编号
            pleaseOrderName,//下单人姓名
            pleaseOrderPhone, //下单人手机号
            goodsPeopleName,//收货人姓名
            goodsPhone, //收货人手机号
            rentTime,//起租时间
            createTime //创建时间
        } = values;
        const { dispatch } = this.props;
        dispatch({
            type: 'buyoutes/getTableList',
            payload: {
                addressUserName: !!goodsPeopleName ? goodsPeopleName : '',
                addressUserPhone: !!goodsPhone ? goodsPhone : '',
                buyOutOrderId: !!orderbianhao ? orderbianhao : '',
                createTimeEnd: !!createTime ? moment(createTime[1]).format('YYYY-MM-DD') : '',
                createTimeStart: !!createTime ? moment(createTime[0]).format('YYYY-MM-DD') : '',
                orderId: !!olOrderid ? olOrderid : '',
                pageNumber: current,
                pageSize: 10,
                productId: !!orderid ? orderid : '',
                productName: !!goodsName ? goodsName : '',
                rentTimeEnd: !!rentTime ? moment(rentTime[1]).format('YYYY-MM-DD') : '',
                rentTimeStart: !!rentTime ? moment(rentTime[0]).format('YYYY-MM-DD') : '',
                status: status,
                telephone: !!pleaseOrderPhone ? pleaseOrderPhone : '',
                userName: !!pleaseOrderName ? pleaseOrderName : '',
                shopId: getShopId(),
            }
        })
    }
    onOldorder = (orderId) => {
        router.push(`/list/buyout/olddetail?id=${orderId}`)
    }
    render() {
        const columns = [
            {
                title: '订单号',
                width: 200,
                dataIndex: 'buyOutOrderId',
                fixed: 'left',
            },
            {
                title: '商品',
                width: 250,
                dataIndex: 'productImage',
                fixed: 'left',
                render: (productImage) => {
                    // console.log(productImage)
                    return (
                        <div>
                            {
                                !!productImage ?
                                    <div className={styles.product}>
                                        <span >
                                            <img style={{ width: '53px', height: '53px' }} src={productImage.src} alt="error" />
                                        </span>
                                        <div className={styles.product_desc}>
                                            <div className={styles.product_name}> {productImage.productName} </div>
                                            <div className={styles.product_sku}>{productImage.skuTitle}</div>
                                        </div>
                                    </div>
                                    : null
                            }
                        </div>
                    )
                }
            },
            {
                title: '原订单号',
                dataIndex: 'orderId',
                render: (orderId) => {
                    return (
                        <a onClick={() => this.onOldorder(orderId)}>{orderId}</a>
                    )
                }
            },
            { title: '买断下单时间', dataIndex: 'createTime' },
            { title: '下单用户', dataIndex: 'telephone' },
            { title: '用户姓名', dataIndex: 'userName' },
            {
                title: '状态',
                dataIndex: 'state',
                render: (state) => {
                    return (
                        <span>
                            {
                                (() => {
                                    switch (state) {
                                        case 'CANCEL':
                                            return '用户取消'
                                        case 'CLOSE':
                                            return '关闭'
                                        case 'FINISH':
                                            return '已完成'
                                        case 'WAIT_PAY':
                                            return '待支付'
                                        case 'PAYING':
                                            return '支付中'
                                        default:
                                            return null;
                                    }
                                })()
                            }
                        </span>
                    )
                }
            },
            {
                title: '操作',
                fixed: 'right',
                width: 100,
                render: (record) => {
                    return (
                        <div>
                            <a onClick={() => this.onShowmodal('view', record.orderId)}>查看</a><br />
                            <a onClick={() => this.onShowmodal('certificate', record)}>证件</a><br />
                            <a onClick={() => this.onShowmodal('note', record.uid)}>备注</a>
                        </div>
                    )
                },
            },
        ];
        const { buyoutes: { tableList } } = this.props;
        // console.log(tableList)
        const { typeOrder } = this.props;
        const { isVisible, isType, current, idcard, facecard } = this.state;
        const paginationProps = {
            current: current,
            pageSize: 10,
            // total: !!data ? data.length : 0,
            total: !!tableList ? tableList.length : 0,
            showTotal: (total) =>
                <span style={{ fontSize: '14px' }}>
                    <span>共{Math.ceil(total / 10)}页</span>&emsp;
               <span>共{total}条</span>
                </span>
        };

        return (
            <div>
                <Table
                    columns={columns}
                    // dataSource={onTableDatas(data)}
                    dataSource={onTableDatas(tableList)}
                    scroll={{ x: 1300 }}
                    rowKey={record => record}
                    pagination={paginationProps}
                    onChange={this.onPageChange}
                />
                <Modales idcard={idcard} facecard={facecard} type={isType} visible={isVisible} onCancel={this.onCancel} />
            </div>
        )
    }
}